<template>
  <div class="margin_30">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <el-steps :active="info.orderBase.status+1" align-center class="margin_30">
        <el-step title="待付款" :description="info.orderBase.createTime" />
        <el-step title="待发货" :description="info.orderBase.paymentTime" />
        <el-step title="已发货" :description="info.orderBase.deliveryTime" />
        <el-step v-if="info.orderBase.status != 4" title="已完成" :description="info.orderBase.receiveTime" />
        <el-step v-if="info.orderBase.status != 3" title="退货" :description="info.orderBase.finishTime" />
      </el-steps>
      <el-divider />
      <div>
        <h4 style="display:inline-block; margin-right:10px;">订单信息:</h4>
        <el-tag v-if="info.orderBase.status === 0" size="small" type="danger" effect="dark">
          待付款
        </el-tag>
        <el-tag v-else-if="info.orderBase.status === 1" size="small" type="warning" effect="dark">
          待发货
        </el-tag>
        <el-tag v-else-if="info.orderBase.status === 2" size="small" type="">
          已发货
        </el-tag>
        <el-tag v-else-if="info.orderBase.status === 3" size="small" type="" effect="dark">
          已完成
        </el-tag>
        <el-tag v-else-if="info.orderBase.status === 4" size="small" type="info" effect="dark">
          退货
        </el-tag>
        <el-tag v-else-if="info.orderBase.status === 5" size="small" type="info">
          无效订单
        </el-tag>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><p>订单金额:<span style="color:red;">{{ info.orderBase.totalAmount }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>订单编号:<span>{{ info.orderBase.orderSn }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>用户账号:<span>{{ info.orderBase.memberUsername }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>备注:<span>{{ info.orderBase.note }}</span></p></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><p>下单时间:<span>{{ info.orderBase.createTime }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>付款时间:<span>{{ info.orderBase.paymentTime }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>发货时间:<span>{{ info.orderBase.deliveryTime }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>收货时间:<span>{{ info.orderBase.receiveTime }}</span></p></el-col>
      </el-row>
      <el-divider />
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><h4>收货人信息:</h4></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><p>收货人:<span>{{ info.orderBase.receiverName }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>用户姓名:<span>{{ info.orderBase.memberUsername }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>手机号码:<span>{{ info.orderBase.receiverPhone }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>邮政编码:<span>{{ info.orderBase.receiverPostCode }}</span></p></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><p>地市:<span>{{ info.orderBase.receiverProvince }} {{ info.orderBase.receiverCity }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>详细地址:<span>{{ info.orderBase.receiverDetailAddress }}</span></p></el-col>
      </el-row>
      <el-divider />
      <h4>商品信息:</h4>
      <el-table :data="info.orderItems" border stripe>
        <el-table-column
          prop="productName"
          label="商品名称"
          width=""
          align="center"
        />
        <el-table-column
          prop=""
          label="商品图片"
          width=""
          align="center"
        >
          <template v-slot="scope">
            <img width="100" height="100" :src="scope.row.productPic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="isReturn"
          label="是否退货"
          width=""
          align="center"
        >
          <template v-slot="scope">
            <span v-if="scope.row.isReturn" style="color:red;">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="productBrand"
          label="品牌"
          width=""
          align="center"
        />
        <el-table-column
          prop="productPrice"
          label="价格"
          width=""
          align="center"
        />
        <el-table-column
          prop="productQuantity"
          label="商品数量"
          width=""
          align="center"
        />
        <el-table-column
          fixed="right"
          label="小计"
          width=""
          align="center"
        >
          <template v-slot="scope">
            <span>{{ scope.row.productQuantity * scope.row.productPrice }}</span>
          </template>
        </el-table-column>
      </el-table>
      <h4>费用信息:</h4>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><p>运费金额:<span>0</span></p></el-col>
        <el-col :span="6" :offset="0"><p>订单总金额:<span>{{ info.orderBase.totalAmount }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>实际金额:<span>{{ info.orderBase.payAmount }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>促销优化金额:<span>0</span></p></el-col>
      </el-row>
      <el-form v-if="info.orderBase.status == 1" style="margin-top:30px" :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="物流公司">
          <el-select v-model="form.deliveryCompany" value-key="" placeholder="" clearable filterable>
            <el-option
              label="中通"
              value="中通"
            />
            <el-option
              label="圆通"
              value="圆通"
            />
            <el-option
              label="韵达"
              value="韵达"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="form.deliverySn" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认发货</el-button>
        </el-form-item>
      </el-form>
      <el-divider />
      <div v-if="info.orderBase.status != 0 && info.orderBase.status != 1">
        <h4>物流信息:</h4>
        <el-table :data="wuliuList" border stripe>
          <el-table-column
            prop="time"
            label="时间"
            width="200"
          />
          <el-table-column
            prop="status"
            label="状态"
            width=""
          />
          <el-table-column
            prop="note"
            label="备注"
            width=""
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  orderDetail,
  sendDone
} from '@/api/order/list'
export default {
  name: 'VueAdminTemplateMasterIndex',

  data() {
    return {
      wuliuList: [
        {
          time: '2015-03-06 21:16:58',
          status: '深圳市横岗速递营销部已收件',
          note: '揽投员姓名：钟定基;联系电话：13883838888'
        },
        {
          time: '2015-03-06 21:16:58',
          status: '深圳市横岗速递营销部已收件',
          note: '揽投员姓名：钟定基;联系电话：13883838888'
        },
        {
          time: '2015-03-06 21:16:58',
          status: '深圳市横岗速递营销部已收件',
          note: '揽投员姓名：钟定基;联系电话：13883838888'
        },
        {
          time: '2015-03-06 21:16:58',
          status: '深圳市横岗速递营销部已收件',
          note: '揽投员姓名：钟定基;联系电话：13883838888'
        },
        {
          time: '2015-03-06 21:16:58',
          status: '深圳市横岗速递营销部已收件',
          note: '揽投员姓名：钟定基;联系电话：13883838888'
        },
        {
          time: '2015-03-06 21:16:58',
          status: '深圳市横岗速递营销部已收件',
          note: '揽投员姓名：钟定基;联系电话：13883838888'
        }
      ],
      info: {
        orderBase: {},
        orderItems: []
      },
      form: {
        orderId: this.$route.params.id,
        deliverySn: '',
        deliveryCompany: ''
      }
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    init() {
      orderDetail(this.$route.params.id)
        .then(res => {
          console.log(res)
          this.info = res.data.orderDetail
        })
    },
    // 确认发货
    onSubmit() {
      sendDone(this.form)
        .then(res => {
          this.init()
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
